<template>
	<view class="display uv-flex-column">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 60px"></uv-text>
		</view>
		<view id="bd_view" class="bd uv-flex-row hidden-scrollbar">
			<template v-for="(item,index) in typing.content" :key="index">
				<view class="item uv-flex-column" :class="'item-'+index">
					<view class="typing uv-flex-row">
						<template v-for="(item2,index2) in item.display" :key="index2">
							<!-- 									{'error': showErrorClass(index,index2)}, -->
							<view class="letter" 
								:class="[
									{'cursor': index== typing.current&& typing.letterCurrent == index2},
									kClassName(index,index2)
								]" >{{item2}}</view>
						</template>
					</view>
					<view class="character" 
					:class="[
						{'cursor':typing.current == index},
						wClassName(index)
					]">{{item.caption}}</view>
				</view>
			</template>
		</view>
		<view class="real-time">
			<real-time :typing="typing" :successRate="successRate" :percentage="progress"/>
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>

<script setup>
	import { defineComponent, ref } from 'vue';
	import { keyboardList } from '@/common/js/keyboard.js';
	import useTypingCN from '../hooks/useTypingCNDOUBILE.js';
	import realTime from './real-time.vue';
	import progressLine from './progress-line.vue';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, realTime, popupComplete })
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { typing, successRate, courseContent, progress, courseComplete, kClassName, wClassName } = useTypingCN(() => {
		return props.cont;
	});
</script>

<style scoped lang="scss">
	@import '../common/style.scss';
	.bd {
		height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
		max-width: 1080px;
		margin: 0 auto;
		flex-wrap: wrap;
		.item {
			margin: 0 8px;
			align-items: center;
			font-size: 45px;
			color: rgb(127, 133, 150);
			.typing {
			}
			.character {
				padding: 0 0 10px;
			}
			.letter {
				width: 27px;
				margin: 0 2px;
				text-align: center;
				&.cursor {
					background: rgba(249, 250, 252, 0.2);
					box-shadow: rgb(216, 88, 134) 0px -4px 0px inset;
					border-radius: 2px;
				}
				&.warn {
					background-color: #ffe9b2;
					color: #0e630e;
				}
				&.error {
					background-color: pink;
					color: #8b0000;
				}
				&.success {
					color: rgb(48, 178, 140);
				}
			}
			.character {
				&.cursor {
					background: rgba(0, 0, 0, 0.1);
				}
				&.error {
					color: pink;
				}
				&.pass {
					color: rgb(48, 178, 140);
				}
			}
		}
	}
</style>